<script lang="ts" setup>
import {
  ElMessageBox,
  ElDialog,
  ElButton,
  ElForm,
  ElFormItem,
  ElMessage,
  ElDatePicker,
  ElTimePicker,
  ElCol
} from "element-plus";
import { reactive, ref } from "vue";

const dialogVisible = ref(false);
const openDialog = (obj) => {
  dialogVisible.value = true;
  ruleForm.id = obj.id;
};

defineExpose({ openDialog });

const ruleFormRef = ref();
const ruleForm = reactive<RuleForm>({
  id: "",
  date1: "",
  date2:''
});

const rules = reactive({
  
});

const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      // 添加成功
      ElMessage({
        plain: true,
        message: "添加成功",
        type: "success",
      });
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl) => {
  if (!formEl) return;
  ruleFormRef.value.resetFields();
  dialogVisible.value = false;
};

const handleClose = (done: () => void) => {
  dialogVisible.value = false;
  // ElMessageBox.confirm("确定关闭对话框?")
  //   .then(() => {
  //     dialogVisible.value = false;
  //   })
  //   .catch(() => {
  //     // catch error
  //   });
};
</script>

<template>
  <div class="page">
    <ElDialog
      v-model="dialogVisible"
      title="启用账号"
      width="600"
      :before-close="handleClose"
    >
      <div>
        <ElForm
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="auto"
        >          
          <ElFormItem label="到期时间" prop="count">
            <ElCol :span="11">
              <ElDatePicker
                v-model="ruleForm.date1"
                type="date"
                placeholder="选择日期"
                style="width: 100%"
              />
            </ElCol>
            <ElCol :span="2" class="text-center">
              <span class="text-gray-500">-</span>
            </ElCol>
            <ElCol :span="11">
              <ElTimePicker
                v-model="ruleForm.date2"
                placeholder="选择时间"
                style="width: 100%"
              />
            </ElCol>
          </ElFormItem>
        </ElForm>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <ElButton @click="resetForm(ruleFormRef)">取消</ElButton>
          <ElButton type="primary" @click="submitForm(ruleFormRef)">
            确定
          </ElButton>
        </div>
      </template>
    </ElDialog>
  </div>
</template>